.canvas__container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  cursor: cell;
}

.canvas__is-pan-mode {
  cursor: grab;
}

.canvas__is-panning {
  cursor: grabbing;
}

.canvas__element {
  vertical-align: middle;
}

.canvas__element {
  width: 100%;
  height: 100%;
}

.canvas__is-erase-mode {
  cursor: none;
}

.canvas--top-right-container {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 10;
}

.canvas__element-readonly {
  height: calc(100% - 3.3rem);
}

.canvas--top-right-container > svg {
  margin-left: 2rem;
}

.back-button__container {
  position: fixed;
  top: 2rem;
  left: 2rem;
  display: flex;
  align-items: center;
}

.back-button__container svg {
  margin-right: 1rem;
  width: auto;
  height: 2.5rem;
  position: relative;
  left: 0;
  transition-property: left;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.back-button__container:hover {
  cursor: pointer;
}

.back-button__container:hover svg {
  left: -5px;
}

.zoom-percentage {
  position: fixed;
  display: inline-block;
  bottom: 1rem;
  left: 1rem;
  padding: .8rem 1rem;
  font-size: 1.2rem;
  border-radius: 4px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .2);
  pointer-events: none;
  z-index: 2;
}

.zoom-percentage:not(.zoom-percentage--100) {
  color: #fd5865;
}

.path--select-shape:hover {
  cursor: grab;
}

.path--select-shape:active {
  cursor: grabbing;
}

@media (prefers-color-scheme: dark) {
  .back-button__container svg {
    fill: #fff;
  }

  .zoom-percentage {
    background: #323232;
    color: #fff;
  }
}

@media (prefers-color-scheme: light) {
  .zoom-percentage {
    background: #fff;
    border: 1px solid #d1d1d1;
  }
}
